<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            body,h1,h2,h3,h4,h5,h6,hr,p,blockquote,dl,dt,dd,ul,ol,li,pre,form,fieldset,legend,button,input,textarea,th,td{margin:0;padding:0;}
            a{text-decoration:none;color:#000;}
            ol,ul,dl{list-style:none;}
            b,strong{font-weight:normal;}
            h1,h2,h3,h4,h5,h6{font-size:12px;font-weight:normal;}
            i,em{font-style:normal;}
            .clearfix:after{display:block;content:'';clear:both;}
            .clearfix{zoom:1}
            img{vertical-align:top;border:none;}
            table{border-collapse:collapse; vertical-align: middle; border-color: inherit}
            tr{  display: table-row;vertical-align: inherit;border-color: inherit;}
            th,td{padding:0; display: table-cell; vertical-align: inherit;}
            iframe{border:none;}
            .vbase{font-size: 0px;}
            .vbase:before{content: ""; height:100%; width: 0; overflow: hidden; display:inline-block; vertical-align:middle; }
            input{ -webkit-appearance: none;}
            input::-webkit-inner-spin-button {-webkit-appearance: none;}
            input::-webkit-outer-spin-button {-webkit-appearance: none;}
            select{-moz-appearance:none;-webkit-appearance:none;appearance:none;}
            input,a,button,select,textarea{tap-highlight-color: rgba(0,0,0,0);-webkit-tap-highlight-color: rgba(0,0,0,0);outline: none}
            
            html,
            body {
                width: 100%;
                height: 100%;
            }
            
            table {
                border-collapse: collapse;
                /*width: 100%;*/
            }
            
            td {
                border: 1px solid #000;
                box-sizing: border-box;
                text-align: center;
                /*height: 20px;*/
                word-break:break-all;
                word-wrap:break-word;
            }
            
            i {
                display: inline-block;
            }
            
            .ball{
                border-radius: 50%;
            }
            
            .menu{
                display: none;
                position: fixed;
                top: 0;
                left: 0;
                width: 130px;
                background: #fff;
            }
            .menu li{
                height: 24px;
                line-height: 24px;
                cursor: pointer;
                font-size: 12px;
            }
            .menu li span{
                float: left;
                margin-left: 3px;
            }
            .menu li.m-l{
                height: 0;
                line-height: 0;
                border-bottom: 1px dotted #000;
            }
            .menu li i{
                display: inline;
                float: left;
                width: 15px;
                height: 15px;
                margin-top: 5px;
                margin-left: 3px;
            }
            li.red i{
                background: red;
            }
            li.yellow i{
                background: yellow;
            }
            li.blue i{
                background: blue;
            }
            li.green i{
                background: green;
            }
            li.purple i{
                background: purple;
            }
        </style>
    </head>

    <body>        
        <table>
        </table>
        <!--<canvas width="100%" height="100%" style="background: #000;"></canvas>-->
        <div class="menu">
            <ul>
                <li class="m-b red" data-type = "ball" data-color="red"><i class="ball"></i><span>红球</span></li>
                <li class="m-b yellow" data-type = "ball" data-color="yellow"><i class="ball"></i><span>黄球</span></li>
                <li class="m-b blue" data-type = "ball" data-color="blue"><i class="ball"></i><span>蓝球</span></li>
                <li class="m-b green" data-type = "ball" data-color="green"><i class="ball"></i><span>绿球</span></li>
                <li class="m-b purple" data-type = "ball" data-color="purple"><i class="ball"></i><span>紫球</span></li>
                <li class="m-l"></li>
                <li class="m-r red" data-type = "rune" data-color="red"><i></i><span>红符文</span></li>
                <li class="m-r yellow" data-type = "rune" data-color="yellow"><i></i><span>黄符文</span></li>
                <li class="m-r blue" data-type = "rune" data-color="blue"><i></i><span>蓝符文</span></li>
                <li class="m-r green" data-type = "rune" data-color="green"><i></i><span>绿符文</span></li>
                <li class="m-r purple" data-type = "rune" data-color="purple"><i></i><span>紫符文</span></li>
            </ul>
        </div>
        <script type="text/javascript">
            var oT = document.querySelector('table');
            var aLi=document.querySelectorAll('.menu li');
            var menu=document.querySelector('.menu');
            var W = document.documentElement.clientWidth;
            var H = document.documentElement.clientHeight;

            var w = Math.floor(W / 80);
            var ColNum = Math.floor(H / w);

            var mNow=null;
            for(var i = 0; i < ColNum; i++) {
                var tr = document.createElement('tr');
                for(var j = 0; j < 80; j++) {
                    var td = document.createElement('td');
                    td.style.width = w + 'px';
                    td.style.height = w + 'px';
                    td.vAlign='middle';
                    tr.appendChild(td)
                }
                oT.appendChild(tr)
            }
            
            function rStyle(obj,type,color){
                var iw=w*0.5+'px';
                var ih=w*0.5+'px';
                
                obj.style.width=iw;
                obj.style.height=ih;
                obj.style.background=color;
                
                obj.className=type;
            }
            
            for(var i=0;i<aLi.length;i++){
                aLi[i].onmouseover=function(){
                    this.style.background='#ccc'
                }
                aLi[i].onmouseout=function(){
                    this.style.background='#fff'
                }
                aLi[i].onclick=function(){
                    if(mNow){
                        console.log(mNow)
                        mNow.innerHTML='';
                        mNow.style.background='#fff'
                        var oi=document.createElement('i');
                        console.log(this.dataset.type,this.dataset.color)
                        rStyle(oi,this.dataset.type,this.dataset.color)
                        mNow.appendChild(oi);
                        menu.style.display='none';
                    }
                    
                }
                
            }
            
            

            function etar(obj,fn){
                if(obj.tagName==='TD'){
                    fn(obj);
                }else if(obj.parentNode.tagName==='TD'){
                    fn(obj.parentNode)
                }
            }
            
            oT.addEventListener('click', function(ev) {
                var tar = ev.target;
                
                etar(tar,function(obj){
                    if(obj.isclicked) {
                        obj.isclicked = false;
                        obj.style.background = '#fff'
                    } else {
                        obj.isclicked = true;
                        obj.innerHTML=''
                        obj.style.background = '#b40'
                    }
                })
            }, false);
            
            document.addEventListener('click',function(){
                menu.style.display='none';
            },false)
            
            document.addEventListener('contextmenu', function(ev) {
                ev.preventDefault();
                
                var x=ev.pageX;
                var y=ev.pageY;
                
                menu.style.top=y+'px';
                menu.style.left=x+'px';
                menu.style.display='block';
                
                etar(ev.target,function(obj){
                    mNow=obj;
                })
                
            }, false);
        </script>
    </body>

</html>